<template>
  <div class="box">
    <div class="tou">地址管理</div>
   <van-contact-list
  v-model="chosenContactId"
  :list="list"
  default-tag-text="默认"
  @add="onAdd"
  @edit="onEdit"
  @select="onSelect"
/>
    <!-- <button class="but" @click="$router.push(`/xinjian`)">
      + 新建收货地址
    </button> -->
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
      chosenContactId: '1',
      list: [
        {
          id: '1',
          name: '张三',
          tel: '13000000000',
          isDefault: true,
        },
        {
          id: '2',
          name: '李四',
          tel: '1310000000',
        },
      ],
    };
  },
  methods: {
    onAdd() {
     this.$router.push(`/xinjian`);
    },
    onEdit(contact) {
      Toast('编辑' + contact.id);
    },
    onSelect(contact) {
      Toast('选择' + contact.id);
    },
  },
};
</script>

<style  scoped>
/* .box{
    width: 100%;
    height: 100%;
} */

.tou {
  width: 100%;
  background-image: linear-gradient(
      180deg,
      #fe502d 0%,
      #fb4723 31%,
      #fb5136 71%,
      #ff5849 100%
    ),
    linear-gradient(#fff3f2, #fff3f2);
  height: 46px;
  color: #323233;
  font-size: 24px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.but {
  width: 80%;
  color: #fff;
  background-color: #ee0a24;
  border: none; /* 去除边框 */

  padding: 10px 20px; /* 内边距 */
  text-align: center; /* 文本居中 */
  border-radius: 22px; /* 圆角半径 */

  position: fixed;
  bottom: 0; /* 元素固定在视口底部 */
  left: 50%; /* 元素左边缘位于视口宽度的50%处 */
  transform: translateX(-50%); /* 通过平移元素宽度的一半来水平居中 */
}
</style>
